<!--
 * @Date: 2024-09-13 10:17:19
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-09-14 13:28:52
 * @Description: 图标组件
-->
<template>
  <i v-if="isEleIcon" class="el-icon" :style="iconStyle">
    <component :is="name" />
  </i>
  <i v-else class="rk-icon" :class="iconClass" :style="iconStyle"></i>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  // 图标名称
  name: { type: String },
  // 图标大小，默认为14px
  size: { type: [String, Number], default: () => 14 },
  // 图标颜色
  color: { type: String }
})

// i标签的样式类
const iconClass = computed(() => {
  const { name } = props
  let finalClass = name
  if (name) {
    if (name.startsWith('rk-icon-')) {
      finalClass = `rk-iconfont ${name}`
    } else if ((name.startsWith('icon-'))) {
      finalClass = `iconfont ${name}`
    } else {
      if (!name.includes('iconfont')) {
        finalClass = `rk-iconfont rk-icon-${name}`
      }
    }
  }
  return finalClass
})
// 图标的style样式
const iconStyle = computed(() => {
  const styles = {
    color: props.color
  }
  const { size } = props
  if (typeof size === 'string' && size.endsWith('px')) {
    styles.fontSize = size
  } else if (typeof size === 'number') {
    styles.fontSize = `${size}px`
  }
  return styles;
})
// 是否为el图标
const isEleIcon = computed(() => {
  return props?.name?.startsWith('ele-');
})


</script>

<style lang="scss" scoped>
</style>
<style lang="scss">
@import '@/theme/mixins/index.scss';
.el-sub-menu,
.el-menu-item {
  .iconfont, .rk-iconfont {
    @include generalIcon;
  }
}
</style>

